<template>
  <div class="student-character">
    <div class="character-card-list">
      <a-card hoverable style="width: 280px" class="add">
        <a-button class="new-btn" type="dashed" @click="showDrawer">
          <a-icon type="plus" />
        </a-button>
      </a-card>
      <a-card style="width: 280px" v-for="item in characterList" :key="item.id">
        <p>id：{{ item.id }}</p>
        <p>姓名：{{ item.name }}</p>
        <p>职位：{{ item.position }}</p>
        <p>履历：{{ item.resume }}</p>
        <template slot="actions" class="ant-card-actions">
          <a-icon key="del" type="delete" @click="showDelModal(item.id)" />
          <a-icon key="edit" type="edit" @click="edit(item)" />
        </template>
      </a-card>
    </div>
    <a-drawer
      :title="drawerTitle"
      :width="620"
      :visible="visibleDrawer"
      :body-style="{ paddingBottom: '80px' }"
      @close="closeDrawer"
    >
      <a-form :form="form" layout="vertical" ref="form">
        <a-form-item v-if="currentId" title="主要作品">
          <a-tag
            color="rgb(35 184 209)"
            @click="$router.push(`/case/caseDetail/${ele.id}`)"
            v-for="ele in currentCases"
            :key="ele.id"
            ># {{ ele.name }}</a-tag
          >

          <a-button
            icon="plus"
            type="primary"
            @click="$router.push(`/web/case/caseDetail/0`)"
            >添加案例</a-button
          >
        </a-form-item>
        <a-form-item
          :label="item.title"
          v-for="item in columns"
          :key="item.key"
        >
          <a-input
            v-if="item.inputType == 'input'"
            v-model="inputForm[`${item.key}`]"
          >
          </a-input>
          <wangEditor
            ref="wangeditor"
            v-if="item.inputType == 'wangEditor'"
            v-model="inputForm[`${item.key}`]"
          ></wangEditor>
        </a-form-item>
      </a-form>
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
      >
        <a-button type="primary" @click="submit"> 提交 </a-button>
      </div>
    </a-drawer>
    <a-modal
      centered
      title="此操作不可逆！"
      v-model="delModalVisible"
      @ok="delOk"
      @cancel="delNo"
    >
      <p>确认删除？</p>
    </a-modal>
  </div>
</template>

<script>
import {
  addCharacterApi,
  editCharacterApi,
  delCharacterApi,
  getCharacterListApi,
  getCharacterByIdApi,
} from '@/services/webApi/character';
import wangEditor from '@/pages/components/wangEditor/index.vue';
import { UPLOAD } from '@/services/api';

function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}
export default {
  components: { wangEditor },
  data() {
    return {
      columns: [
        {
          title: '姓名',
          dataIndex: 'name',
          key: 'name',
          inputType: 'input',
        },
        {
          title: '职位',
          dataIndex: 'position',
          key: 'position',
          inputType: 'input',
        },
        {
          title: '履历',
          dataIndex: 'resume',
          key: 'resume',
          inputType: 'wangEditor',
        },
      ],
      inputForm: {},
      form: this.$form.createForm(this),
      visibleDrawer: false,
      characterList: [],
      currentId: '',
      drawerTitle: '新增',
      delModalVisible: false,
      currentCases: [],
    };
  },
  created() {
    this.uploadUrl = UPLOAD;
    this.getCharacterList();
  },
  methods: {
    submit() {
      if (
        !this.inputForm.name ||
        !this.inputForm.position ||
        !this.inputForm.resume
      ) {
        this.$message.error('内容不能为空');
        return;
      }
      if (this.currentId) {
        this.editCharacter();
      } else {
        this.addCharacter();
      }
      setTimeout(() => {
        this.visibleDrawer = false;
      }, 1000);
    },
    edit(item) {
      this.inputForm = item;
      this.visibleDrawer = true;
      this.currentId = item.id;
      this.drawerTitle = `当前编辑id：${item.id}`;
      this.getCharacterById();
    },
    showDrawer() {
      this.visibleDrawer = !this.visibleDrawer;
      this.drawerTitle = '新增';
      this.inputForm = {};
      if (this.currentCases.length > 0) {
        this.$refs.wangeditor[0].editor.txt.clear();
      }
    },
    closeDrawer() {
      this.visibleDrawer = !this.visibleDrawer;
      this.currentId = '';
    },
    showDelModal(id) {
      this.delModalVisible = true;
      this.currentId = id;
    },
    delOk() {
      delCharacterApi({ id: this.currentId })
        .then((res) => {
          if (res.code == 200) {
            this.$message.success('删除成功', 1.5);
            this.currentId = '';
          }

          setTimeout(() => {
            this.getCharacterList();
            this.delModalVisible = false;
          }, 1000);
        })
        .catch((err) => {
          this.$message.error(err, 1.5);
        });
    },
    delNo() {
      this.delModalVisible = false;
      this.currentId = '';
    },
    getCharacterList() {
      getCharacterListApi()
        .then((res) => {
          if (res.code == 200) {
            this.characterList = res.data;
          }
        })
        .catch((err) => {
          this.$message.error(err, 1.5);
        });
    },
    getCharacterById() {
      getCharacterByIdApi({ id: this.currentId }).then((res) => {
        if (res.code == 200) {
          this.currentCases = res.data.Cases;
        }
      });
    },
    addCharacter() {
      addCharacterApi(this.inputForm)
        .then((res) => {
          if (res.code == 200) {
            this.visibleDrawer = !this.visibleDrawer;
            this.$message.success('添加成功', 1.5);
            this.getCharacterList();
            this.inputForm = {};
          }
        })
        .catch((err) => {
          this.$message.error(err, 1.5);
        });
    },
    editCharacter() {
      editCharacterApi({ ...this.inputForm, id: this.currentId })
        .then((res) => {
          if (res.code == 200) {
            this.visibleDrawer = !this.visibleDrawer;
            this.$message.success('修改成功', 1.5);
            this.getCharacterList();
          }
          this.currentId = '';
        })
        .catch((err) => {
          this.$message.error(err, 1.5);
        });
    },
    // 图片上传
    handleChange(info) {
      if (info.file.status === 'uploading') {
        this.photoLoading = true;
        return;
      }
      if (info.file.status === 'done') {
        this.caseDetail.cover = info.file.response.data[0];
        getBase64(info.file.originFileObj, (imageUrl) => {
          this.img = imageUrl;
          this.photoLoading = false;
        });
      }
    },
    beforeUpload(file) {
      const isJpgOrPng =
        file.type === 'image/jpeg' ||
        file.type === 'image/png' ||
        file.type === 'image/bmp' ||
        file.type === 'image/gif' ||
        file.type === 'image/webp';
      if (!isJpgOrPng) {
        this.$message.error('只能上传图片');
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('图片必须小于2MB!');
      }
      return isJpgOrPng && isLt2M;
    },
  },
};
</script>

<style lang="scss" scoped>
.character-card-list {
  display: flex;
  flex-wrap: wrap;
  .ant-card {
    margin-right: 15px;
    margin-bottom: 15px;
    position: relative;
    ::v-deep .ant-card-actions {
      position: absolute;
      bottom: 0;
      width: 100%;
    }
  }
  .add {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    .new-btn {
      border-radius: 2px;
      width: 220px;
      height: 220px;
      .anticon {
        font-size: 40px;
      }
    }
  }
  p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    &:last-child {
      margin-bottom: 40px;
    }
  }
}
.ant-tag {
  margin-bottom: 10px;
  height: 30px;
  font-size: 20px;
}
</style>
